{% include "../common/_app_css.html" %}
<div class="layui-fluid" id="app">
    <div class="layui-card">
        <transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOut">
            <div class="layui-form layui-card-header" v-show="showSearch">
                <el-form :inline="true" :model="queryForm" class="demo-form-inline" @submit.native.prevent>
                    <el-form-item label="名称">
                        <el-input v-model="queryForm.content" class="app-query-input" size="small" placeholder="请输入名称" @keyup.enter.native="onSearch"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" icon="el-icon-search" @click="onSearch">查询</el-button>
                        <el-button size="small" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </transition>
        <div class="layui-card-body">
            <div class="app-table-action">
                <div class="app-table-btn">
                    {#<el-button size="small" type="primary" icon="el-icon-plus" @click="addNew">新增</el-button>#}
                    {#<el-button size="small" type="danger" plain icon="el-icon-delete" @click="onBatchDelete">删除</el-button>#}
                </div>
                <div class="app-table-action-right">
                    <app.table-tool-bar :show-search.sync="showSearch" @query-table="getList" :columns="columns"></app.table-tool-bar>
                </div>
            </div>
            <div class="app-table-container">
                <el-table :data="tableData" border stripe row-key="id" v-loading="tableLoading" @selection-change="handleSelectionChange" :default-expand-all="isExpandAll" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    {#<el-table-column type="selection" width="55"></el-table-column>#}
                    <el-table-column prop="username" label="评论人" width="180"></el-table-column>
                    <el-table-column label="文章ID" width="180" align="center">
                        <template slot-scope="scope">
                            <a :href="`/article/${scope.row.bid}`" target="_blank" v-html="scope.row.bid"></a>
                        </template>
                    </el-table-column>
                    {#<el-table-column prop="id" label="序号"></el-table-column>#}
                    <el-table-column prop="author" label="回复人" width="180"></el-table-column>
                    <el-table-column type="content" label="留言" prop="content">
                        <template slot-scope="scope">
                            <p v-html="scope.row.content"></p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="留言时间" width="200"></el-table-column>

                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" class="app-edit-btn" type="text" icon="el-icon-chat-line-square" @click="handleEdit(scope.$index, scope.row)">回复</el-button>
                            <el-button size="mini" class="app-del-btn" type="text" icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                    <template slot="empty" style="height: 100px;">
                        <el-empty description="暂无数据"></el-empty>
                    </template>
                </el-table>
            </div>
            <div class="app-table-page">
                <div class="app-table-page-info"></div>
                <app.pagination v-show="total > 0" :total="total" :page.sync="queryForm.page" :limit.sync="queryForm.limit" @pagination="getList" />
            </div>

            {% include "./edit.html" %}

        </div>
    </div>
</div>
{% include "../common/_app_js.html" %}
{% block importJs %}
    <script src="/public/common/js/tinymce4.7.5/tinymce.min.js"></script>
{% endblock %}
{% include "../components/tinymce.html" %}
{% include "../components/table-tool-bar.html" %}
{% include "../components/pagination.html" %}
<script>
    var vm = app.vue({
        el: '#app',
        data() {
            return {
                showSearch: true,
                dialogStatus: '',
                editVisible: false,
                tableLoading: false,
                isExpandAll: false,
                // 查询参数
                queryForm: {
                    content: '',
                    page: 1,
                    limit: 10,
                },
                titleMap: {
                    update: '回复',
                    create: '新增'
                },
                modelForm: {
                    title: '',
                    content_html: '',
                    is_show: true,
                    type: '公司新闻',
                    type_id: ''
                },
                rules:{
                    title: [
                        { required: true, message: '请输入标题名称', trigger: 'blur' },
                        { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
                    ],
                    catid: [{ required: true, message: '请请选择类别', trigger: ["blur",'change'] }],
                    description: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                },
                columns: [],
                multipleSelection: [],
                tableData: [],
                categoryList: [],
                total: 0,
            }
        },
        created() {
            this.getList()
        },
        methods: {
            addNew() {
                this.editVisible = true
                this.dialogStatus = 'create'
            },
            getList() {
                this.tableLoading = true
                app.request({
                    method: 'get',
                    url: 'comment/list',
                    params: this.queryForm,
                }).then((res) => {
                    this.tableData = res?.data?.rows
                    this.total = res?.data?.total

                    setTimeout(() => {
                        this.tableLoading = false
                    }, 80)
                })
            },
            onSearch: _.debounce(() => {
                vm.queryForm.page = 1
                vm.getList()
            }, 500),
            onReset: _.debounce(() => {
                vm.queryForm = {}
                vm.queryForm.page = 1
                vm.getList()
            }, 500),
            async handleEdit(index, row) {
                const useInfo = this.getUserInfo()

                this.editVisible = true
                this.dialogStatus = 'update'
                this.modelForm = row
            },
            refreshData(msg = '操作') {
                this.getList()
                this.$notify({
                    message: `${msg}成功`,
                    type: 'success',
                    duration: 3000
                })
            },
            handleDelete(index, row) {
                this.onDelete(row.id)
            },
            onBatchDelete() {
                const ids = this.rowSelection.map(item => item.id)

                if (!ids?.length) {
                    this.$message.error('至少选择一项')
                    return
                }

                this.$confirm('你确定要删除选中项吗?', '温馨提示', {
                    type: 'warning'
                }).then(() => {
                    this.onDelete(ids)
                })
            },
            onDelete(id) {
                this.dialogStatus = 'delete'

                app.request({
                    method: 'post',
                    url: 'comment/delete',
                    data: app.stringify({ id })
                }).then((res) => {
                    !res?.code && this.refreshData()
                })
            },
            getUserInfo() {
                return app.admin.getUserInfo()
            },
            getAuthor() {
                const user = this.getUserInfo()
                return user?.author
            },
            createData() {
                const userInfo = this.getUserInfo()

                this.$refs.modelForm.validate(valid => {
                    this.modelForm.pid = this.modelForm.id
                    this.modelForm.content = this.modelForm.reply
                    this.modelForm.username = userInfo.nickname
                    this.modelForm.email = userInfo.email

                    delete this.modelForm.id
                    delete this.modelForm.reply

                    if (valid) {
                        app.request({
                            method: 'post',
                            url: 'comment/insert',
                            data: this.modelForm,
                        }).then(() => {
                            this.editVisible = false
                            this.$refs.modelForm.resetFields()
                            this.onSearch()

                            this.$notify({
                                title: 'Success',
                                message: '回复成功',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
            updateData() {
                this.$refs.modelForm.validate(valid => {
                    if (valid) {
                        app.request({
                            method: 'put',
                            url: 'comment/update',
                            data: this.modelForm,
                        }).then(() => {
                            this.editVisible = false
                            this.$refs.modelForm.resetFields()
                            this.onSearch()

                            this.$notify({
                                title: 'Success',
                                message: '修改成功',
                                type: 'success',
                                duration: 2000
                            })
                        })
                    }
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleCancel() {
                this.editVisible = false
                this.handleClose()
            },
            handleClose(done) {
                this.$refs.modelForm && this.$refs.modelForm.resetFields()
                this.$set(this, 'modelForm', this.$options.data().modelForm)
                done && done()
            }
        }
    })
</script>
